<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="410px"
    @close="$emit('update:visible',false)"
    center
  >
    <div style="text-align: center">
      <el-upload
        ref="uploader"
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :on-success="onSuccess"
        :on-error="onError"
        :on-remove="onRemove"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
        <div class="el-upload__tip" slot="tip">
          {{ tip }}
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
/**
 * 图片上传对话框
 */
export default {
  name: "ImageUploadDialog",
  emits: ["uploaded"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 是否支持多选文件
    multiple: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "导入数据",
    },
    // 提示信息
    tip: {
      type: String,
      default: "只能上传 jpg/png 文件，且不超过 500kb",
    },
    // 上传文件服务端处理地址
    actionUrl: {
      type: String,
      default: "",
    },
    // 上传的文件字段名
    name: {
      type: String,
      default: "file",
    },
    // 设置上传的请求头部
    headers: {
      type: Object,
      default() {
        return {};
      },
    },
    // 上传时附带的额外参数
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      listOfImages: [],
    };
  },
  methods: {
    handleRemove(file) {
      let fileList = this.$refs.uploader.uploadFiles;
      let index = -1;
      for (let i = 0; i < fileList.length; i++) {
        if (fileList[i].url == file.url) {
          index = i;
          break;
        }
      }
      if (index > -1) {
        fileList.splice(index, 1);
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log("handleDownload", file);
    },
    onRemove(file, fileList) {
      console.log("onRemove", file, fileList);
    },
    // 文件上传成功
    onSuccess(response, file, fileList) {
      console.log("[UploadDialog] 文件上传成功 response = ", response);
      this.$emit("uploaded", true, response, file, fileList);
      // this.$emit('update:visible',false)
    },
    // 文件上传失败
    onError(err, file, fileList) {
      console.log("[UploadDialog] 文件上传失败 err = ", err);
      this.$emit("uploaded", false, err, file, fileList);
    },
  },
};
</script>

<style>
.el-upload__tip {
  font-size: 13px;
  text-align: center;
}
.btn-link {
  text-decoration: none;
  margin-left: 5px;
  color: #1890ff;
}
.el-dialog__body {
  padding-top: 0;
}
</style>